<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <li id="todoItem">
      <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <p v-if="show">
          {{ title }}
        </p>
      </transition>
      <button @click="show = !show">
        Toggle
      </button>
      <button v-on:click="$emit('remove')">delete</button>
    </li>
</template>
<script>
  import Velocity from 'velocity-animate'
  export default {
    name: 'todoItem',
    props: ['title'],
    data () {
      return {
        show: true
      }
    },
    methods: {
      beforeEnter: function (el) {
        console.log('beforeEnter')
        el.style.opacity = 0
        el.style.transformOrigin = 'left'
      },
      enter: function (el, done) {
        console.log('enter')
        Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 3000 })
        Velocity(el, { fontSize: '1em' }, { complete: done })
      },
      leave: function (el, done) {
        Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 6000 })
        Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
        Velocity(el, {
          rotateZ: '45deg',
          translateY: '30px',
          translateX: '30px',
          opacity: 0
        }, { complete: done })
      }
    }
  }
</script>

